<template>
    <div>
        <el-breadcrumb separator-class="el-icon-arrow-right" style="padding-left: 10px;padding-bottom: 10px;font-size: 12px;">
            <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>挂号预约</el-breadcrumb-item>
            <el-breadcrumb-item>医生管理</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card>
            <el-form :inline="true" :model="doctor" class="demo-form-inline">
                <!-- 科室名 -->
                <el-form-item label="科室" label-width="70px">
                    <el-input
                        placeholder="请输入科室名称"
                        v-model="doctor.departmentName"
                        clearable>
                    </el-input>
                </el-form-item>
                <!-- 医生名 -->
                <el-form-item label="医生" label-width="70px">
                    <el-input
                        placeholder="请输入医生名称"
                        v-model="doctor.userName"
                        clearable>
                    </el-input>
                </el-form-item>
                 <!-- 单选框 -->
                <el-form-item label="级别" label-width="70px">
                   <el-radio v-model="doctor.type" label="0">普通</el-radio>
                   <el-radio v-model="doctor.type" label="1">专家</el-radio>
                   <el-radio v-model="doctor.type" label="">全部</el-radio>
                </el-form-item>
                 <el-form-item style="margin-left: 50px;">
                    <el-button icon="el-icon-refresh" @click="reset">重置</el-button>
                    <el-button type="primary" icon="el-icon-search" @click="getDoctors">查询</el-button>
                    <el-button type="success" icon="el-icon-plus" @click="show">添加</el-button>
                    <el-button type="warning" icon="el-icon-download">导出</el-button>
                </el-form-item>
            </el-form>

             <el-table
                    :data="doctorList"
                    border
                    style="width: 100%; ">
                    <el-table-column
                    fixed
                    prop="departmentName"
                    label="科室"
                    width="120">
                     <template slot-scope="scope">
                            <el-tag type="" closable v-text="scope.row.departmentName"></el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column
                    prop="userName"
                    label="姓名"
                    width="120">
                    </el-table-column>
                    <el-table-column
                    prop="type"
                    label="级别"
                    width="100">
                    <template slot-scope="scope">
                            <el-tag type="danger" effect="plain" v-if="scope.row.type==1">专家</el-tag>
                            <el-tag type="success" effect="plain" v-if="scope.row.type==0">普通</el-tag>
                           
                    </template>
                    </el-table-column>
                    <el-table-column
                    prop="age"
                    label="年龄"
                    width="100">
                    </el-table-column>
                    <el-table-column
                    prop="avatar"
                    label="头像"
                    width="150">
                    <template slot-scope="scope">
                            <el-popover placement="right" trigger="hover">
                                <img :src="scope.row.avatar"
                                     style="height: 150px;width: 120px"/>
                                <img slot="reference" :src="scope.row.avatar"
                                     :alt="scope.row.imgUrl" style="height: 100px;width: 80px;cursor: pointer">
                            </el-popover>
                        </template>
                    </el-table-column>
                    <el-table-column
                    prop="appointment"
                    label="会诊时间"
                    width="200">
                    <template slot-scope="scope">
                        <el-tag type="warning" closable v-text="scope.row.appointment"></el-tag>
                    </template>
                    </el-table-column>

                   <el-table-column
                    prop="place"
                    label="问诊地点"
                    width="150">
                    <template slot-scope="scope">
                        <span ><i class="el-icon-location"></i>{{scope.row.place}}</span>
                    </template>
                    </el-table-column>
                    <el-table-column
                    fixed="right"
                    label="操作"
                    width="100">
                    <template slot-scope="scope">
                       <el-tooltip class="item" effect="dark" content="修改" placement="top-start">
                        <el-button
                        size="mini"
                        type="primary"
                        @click="handleUpdate(scope.$index, scope.row)" icon="el-icon-edit" circle></el-button>
                       </el-tooltip>

                        <el-tooltip class="item" effect="dark" content="删除" placement="top-start">
                        <el-button
                        size="mini"
                        type="danger"
                        @click="handleDelete(scope.$index, scope.row)" icon="el-icon-delete" circle></el-button>
                        </el-tooltip>    

                    </template>
                    </el-table-column>
                </el-table>
                   <!-- 分页 -->
             <el-pagination
                style="padding-top:10px;"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="current"
                :page-sizes="[6, 10, 20, 30]"
                :page-size="size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
             </el-pagination>    
        </el-card>
             <DoctorInsert :addOrUpdateVisible="addOrUpdateVisible" @changeShow="showAddOrUpdate" ref="addOrUpdateRef"></DoctorInsert> 
             <DoctorUpdate :addOrUpdateVisible2="addOrUpdateVisible2" :user="user" @changeShow="showAddOrUpdate2" ref="addOrUpdateRef"></DoctorUpdate> 

    </div>
</template>

<script>
import {getDoctors} from '../../api/users'
import {deleteDoctor} from '../../api/users'

import DoctorInsert from './DoctorInsert'
import DoctorUpdate from './DoctorUpdate'
export default {
    components:{
        DoctorInsert,
        DoctorUpdate
    },
    name:'DoctorManage',
    data(){
        return{
            doctor:{
                departmentName:'',
                userName:'',
                type:'',
                deleted:0,
            },
            doctorList:[],
            size:6,
            current:1,
            total:100,
            addOrUpdateVisible:false,
            addOrUpdateVisible2:false,
            user:{}
        }
    },
    methods:{
        //重置查询条件
        reset() {
            this.doctor={
                departmentName:'',
                userName:'',
                type:'',
                deleted:0,
            }
        },

        //修改
        handleUpdate(index,row) {
            this.addOrUpdateVisible2 = true
            this.user = row
            console.log(this.user)

        },

        //删除
       async handleDelete(index,row) {
           const res = await deleteDoctor(row.userId);
           this.getDoctors();
           // console.log(row)

        },

        //获取所有医生
      async getDoctors() {
          console.log(this.doctor)
          const res = await getDoctors(this.doctor,this.size,this.current);
          this.total = res.data.data.total;
          this.doctorList = res.data.data.doctorList;
          console.log(res)

        },

        //新增
        show() {
            this.addOrUpdateVisible = true
        },
         //监听子组件弹窗关闭后触发，
        showAddOrUpdate(data){
            if(data === 'false'){
                this.addOrUpdateVisible = false
            }else{
                this.addOrUpdateVisible = true
            }
    },
      //监听子组件弹窗关闭后触发，
        showAddOrUpdate2(data){
            if(data === 'false'){
                this.addOrUpdateVisible2 = false
            }else{
                this.addOrUpdateVisible2 = true
            }
    },
          //当每页条数发生改变时
       handleSizeChange(val) {
        //console.log(`每页 ${val} 条`);
        this.size = val;
        //重新查询数据
        this.getDoctors();
      },
      //当前页码改变时
      handleCurrentChange(val) {
        //console.log(`当前页: ${val}`);
        this.current = val;
        this.getDoctors(); 
      },


    },
    mounted() {
        this.getDoctors();
    }
}
</script>

<style>

</style>